<template>
  <div class="">
	<iw-header></iw-header>
    <!--面包屑导航-->
    <div class="breadcrumb container">
        <a href="">首页</a> &gt; <a href="">全部课程</a>
    </div>
    <!--主体内容-->
    <article class="container">
        <section class="course_tag">
            <span>课程等级：</span><a href="" class="active">不限</a>
        </section>
        <section class="course_list">
            <ul>
                <li class="clearfloat" v-for="(item,i) of list" :key="i">
                    <a href="" class="course_img"><img src="img-course/05.png" alt=""/></a>
                    <div class="information">
                        <h2>{{item.maincourse}}</h2>
						<p>cid:{{item.cid}}</p>
                        <p>讲师：鼻孔超人</p>
                        <p>课时：{{item.cLength}}</p>
                        <p>开课时间：{{item.startTime}}</p>
                        <p>上课地点：{{item.address}}<a href="">查看各校区地址</a></p>
                    </div>
                    <span>{{item.price | currency}}</span>
                    <a href="" class="course_btn">查看详情</a>
                </li>
            </ul>
        </section>
        <!-- 分页导航-->
        <div class="pages">
            <a href="" class="" @click="prevPage()">上一页</a>
		    <a href="" class=""  v-for="i of pageCount" :key="i"  @click="showPage(i)" >{{i}}</a> 
            <a href="" @click="nextPage()">下一页</a>
        </div>
    </article>
	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
export default {
	data:()=>{
		return { 
			// ajax获取课程列表
			// list:[],
			pageNum:1,
			pageCount:0,
			list:[]
			//动态路由传参
		}
	},
	computed:{
		//获取计算属性课程列表
		
			typeId(){
				console.log(this.$route.query.type);
				return this.$route.query.type;
			}
	},
	watch:{
		pageNum(){
			this.$http.get(`/course/list?pageNum=${this.pageNum}&typeId=${this.typeId}`).then(res=>{
				this.pageCount=res.data.pageCount;
				this.list=res.data.list;
				// console.log("res",res);
			}).catch(err=>{
				console.log("出错",err)
			})
		}
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer
	},
	methods:{ 
		showPage(i){
			console.log("方法已经被调用")
			this.pageNum=i;
			
		},
		prevPage(){
			this.pageNum==1?this.pageNum=1:this.pageNum--;
			
		},
		nextPage(){
			this.pageNum==this.list.length?this.pageNum:this.pageNum++;
		}
	},

	mounted(){
		console.log("mounted");
		this.$http.get(`/course/list?pageNum=${this.pageNum}&typeId=${this.typeId}`).then(res=>{
			this.pageCount=res.data.pageCount;
			this.list=res.data.list;
			// console.log("res",res);
		}).catch(err=>{
			console.log("出错",err)
		})
	}
	
}	
</script>

<style>
	@import url("../assets/css/mycss.css");
</style>
